<template>
    <div>
        <Header></Header>
        <el-container style="margin-top:-90px;margin-bottom:-100px">>

            <el-aside style="width: 200px;margin-top: 20px">
<!--                &lt;!&ndash;可选区域&ndash;&gt;-->
<!--                <switch></switch>-->
                <!--侧边栏 根据选择的分类显示对应的图书-->
                <SideMenu @indexSelect="listByCategory" ref="sideMenu"></SideMenu>
            </el-aside>
            <!--书籍展示区域-->
            <el-main>
                <books class="books-area" ref="booksArea"></books>
            </el-main>

        </el-container>
        <Footer></Footer>
    </div>


</template>

<script>
    import SideMenu from './SideMenu'
    import Books from './Books'
    import Header from "@/components/Header";
    import Footer from "@/components/Footer";

    export default {
        name: 'AppLibrary',
        components: {Books, SideMenu, Header, Footer},
        methods: {
            listByCategory() {
                const _this = this
                let cid = this.$refs.sideMenu.cid
                let url = 'categories/' + cid + '/books'
                this.$axios.get(url).then(resp => {
                    if (resp && resp.status === 200) {
                        _this.$refs.booksArea.books = resp.data.data
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .books-area {
        width: 990px;
        margin-left: auto;
        margin-right: auto;
    }
</style>

